<template>
  <page-header-wrapper :title="false">
    <a-card
      :style="{ marginBottom: '20px' }"
      :loading="loading"
    >
      <template slot="extra">
        <div v-if="state">
          今日业绩：
          <a-tag color="red">{{ leaderData.jr_yj }}</a-tag>
          / 当月业绩：
          <a-tag color="red">{{ leaderData.dy_yj }}</a-tag>
          / 今日总通时：
          <a-tag color="red">{{ leaderData.jr_zts }}</a-tag>
          / 今日微信添加数：
          <a-tag color="red">{{ leaderData.wx_count }}</a-tag>
        </div>
      </template>
      <template slot="title">
        <a-tag color="red">{{ leader.group }}</a-tag>
        {{ leader.name }}组
      </template>
      <a-row :gutter="[20, 20]">
        <a-col :span="2" v-for="item in adviserList" :key="item.uid">
          <a>
            <a-avatar style="color: #fff; backgroundColor: #1890ff" :size="100">{{ item.username }}</a-avatar>
          </a>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-tabs v-model="queryParam['filter[type]']" @change="onTabs">
        <a-tab-pane key="today" tab="本日"></a-tab-pane>
        <a-tab-pane key="month" tab="当月"></a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="20">
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-model-item label="组长姓名">-->
<!--                <a-select-->
<!--                  show-search-->
<!--                  v-model="queryParam['lid']"-->
<!--                  placeholder="选择组长姓名"-->
<!--                  :filter-option="filterOption"-->
<!--                >-->
<!--                  <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{ item }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
            <a-col :md="6" :sm="24">
              <a-form-model-item label="日期选择">
                <a-range-picker style="width:300px" @change="onChange" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="选择顾问">
                <a-select
                  show-search
                  v-model="queryParam['filter[adviser_name]']"
                  placeholder="选择顾问姓名"
                  :filter-option="filterOption"
                  @change='onSelect'
                >
                  <a-select-option v-for="(item,index) in adviserList" :key="index" :value="item.uid">{{ item.username }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <a-table
        bordered
        ref="table"
        :loading="stateLoading"
        :row-key="(record) => record.uid"
        :data-source="stateData"
        :pagination="false"
      >
        <a-table-column title="顾问姓名" data-index="adviser_name"/>
        <a-table-column-group title="业绩">
          <a-table-column title="计划" data-index="target_currmonth_yj" :sorter="(a, b) => a.target_currmonth_yj - b.target_currmonth_yj">
            <template slot-scope="target_currmonth_yj">
              <a-tag color="red">{{ target_currmonth_yj }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="完成" data-index="yj" :sorter="(a, b) => a.yj - b.yj">
            <template slot-scope="yj">
              <a-tag color="red">{{ yj }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="差值" data-index="yjc" :sorter="(a, b) => a.yjc - b.yjc">
            <template slot-scope="yjc">
              <a-tag color="red">{{ yjc }}</a-tag>
            </template>
          </a-table-column>
        </a-table-column-group>
        <a-table-column-group title="通话">
          <a-table-column title="计划" data-index="target_dacall_sc" :sorter="(a, b) => a.target_dacall_sc - b.target_dacall_sc">
            <template slot-scope="target_dacall_sc">
              <a-tag color="red">{{ target_dacall_sc }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="完成" data-index="ts" :sorter="(a, b) => a.ts - b.ts">
            <template slot-scope="ts">
              <a-tag color="red">{{ ts }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="差值" data-index="tsc" :sorter="(a, b) => a.tsc - b.tsc">
            <template slot-scope="tsc">
              <a-tag color="red">{{ tsc }}</a-tag>
            </template>
          </a-table-column>
        </a-table-column-group>
        <a-table-column-group title="领新">
          <a-table-column title="完成" data-index="num" :sorter="(a, b) => a.num - b.num">
            <template slot-scope="num">
              <a-tag color="red">{{ num }}</a-tag>
            </template>
          </a-table-column>
        </a-table-column-group>
        <a-table-column-group title="共享库">
          <a-table-column title="完成" data-index="gx_num" :sorter="(a, b) => a.gx_num - b.gx_num">
            <template slot-scope="gx_num">
              <a-tag color="red">{{ gx_num }}</a-tag>
            </template>
          </a-table-column>
        </a-table-column-group>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getGroupDetail, getGroupGxList, getGroupLxList, getGroupTsList, getGroupYjList } from '@/api/group'
import col from '@/columns/group'

export default {
  components: {
    STable
  },
  name: 'GroupManager',
  data () {
    return {
      leaderData: {},
      leader: {},
      adviserList: [],
      loading: true,
      stateLoading: true,
      state: false,
      stateColumns: col.state,
      stateData: [],
      stateYj: [],
      stateTs: [],
      stateLx: [],
      stateGx: [],
      queryParam: {},
      type: 'today',
      uids: [],
      timeForm: {},
      userOpts: {}
    }
  },
  created () {
    this.leader['uid'] = (this.$route.params.id).toString()
    this.queryParam['filter[uid]'] = this.leader['uid']
    this.queryParam['filter[type]'] = this.type
    this.queryParam['page_size'] = 1000
    this.getMemberList()
  },
  methods: {
    getMemberList () {
      const app = this
      app.loading = true
      app.state = false
      getGroupDetail(app.leader.uid).then(res => {
        app.leader['name'] = res.result.leader_name
        app.leader['group'] = res.result.group_type
        app.leaderData['dy_yj'] = res.result.dy_yj
        app.leaderData['jr_yj'] = res.result.jr_yj
        app.leaderData['jr_zts'] = res.result.jr_zts
        app.leaderData['wx_count'] = res.result.wx_count
        app.adviserList = res.result.adviser_data
        app.loading = false
        app.state = true
      }).finally(() => {
        app.getState(app.queryParam)
      })
    },
    getState (params) {
      const app = this
      const data = {}
      const arr = []
      app.stateLoading = true
      getGroupYjList(params).then(yj => {
        app.stateYj = yj.result.data
        getGroupTsList(params).then(ts => {
          app.stateTs = ts.result.data
          for (const k in app.stateYj) {
            data[k] = app.stateYj[k]
            data[k].yjc = app.stateYj[k].target_currmonth_yj - app.stateYj[k].yj
            for (const j in app.stateTs) {
              if (app.stateYj[k].uid === app.stateTs[j].uid) {
                data[k].target_dacall_sc = app.stateTs[j].target_dacall_sc
                data[k].ts = app.stateTs[j].ts
                data[k].leader_name = app.stateTs[j].leader_name
                data[k].tsc = app.stateTs[j].target_dacall_sc - app.stateTs[j].ts
              }
            }
          }
          getGroupLxList(params).then(lx => {
            app.stateLx = lx.result.data
            for (const k in data) {
              for (const j in app.stateLx) {
                if (data[k].uid === app.stateLx[j].uid) {
                  data[k].num = app.stateLx[j].num
                }
              }
            }
            getGroupGxList(params).then(gx => {
              app.stateGx = gx.result.data
              for (const k in data) {
                for (const j in app.stateGx) {
                  if (data[k].uid === app.stateGx[j].uid) {
                    data[k].gx_num = app.stateGx[j].num
                  }
                }
              }
            }).finally(() => {
              for (const k in data) {
                arr.push(data[k])
              }
              app.stateData = arr
              app.stateLoading = false
            })
          })
        })
      })
    },
    filterOption (input, option) {
      return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
    },
    onChange (date, dateString) {
      this.queryParam['filter[begin_time_at]'] = dateString[0]
      this.queryParam['filter[end_time_at]'] = dateString[1]
      this.getState(this.queryParam)
    },
    onSelect () {
      this.getState(this.queryParam)
    },
    onTabs (key) {
      this.timeForm = {}
      this.getState(this.queryParam)
    }
  }
}
</script>

<style scoped>

</style>
